<template>
  <el-card body-style="height:auto" class="box-card">

    <div class="box-div">
      <div></div>
      <h2>行为数据监控台</h2>
      <el-card style="margin-top: 2%; width: 48%;float:left;margin-right: 1%">
        <BehaviorTotal id="test" :option="this.option"/>
      </el-card>
      <el-card style="margin-top: 2%; width: 48%">
        <BehaviorTotal id="tes2t" :option="this.option2"/>
      </el-card>
    </div>
    <div class="box-div">
      <!--左-->
      <div style="width: 23%;float: left;height:auto">
        <el-card style="width: 100%;height:150px ;background-color: skyblue">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="mainUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <h3>共记录行为数据</h3>
            <h1>{{total.all}}</h1>
            <h3>条</h3>
          </div>
        </el-card>
        <el-card style="width: 100%;height:150px ;background-color: skyblue;margin-top: 3%">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="manUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <h3>共记录</h3>
            <h3>用户类型行为数据</h3>
            <h1>{{total.agent}}</h1>
            <h3>条</h3>
          </div>
        </el-card>
      </div>
      <!--中-->
      <div style="width: 40%;height: auto;float:left;;margin-left: 5%">
        <el-card style="width: 100%;height:312px">
          <el-table
            :data="behaviorData"
            :key="behaviorDataKey"
            style="width: 100%">
            <el-table-column
              prop="date"
              label="时间"
              width="200">
            </el-table-column>
            <el-table-column
              prop="actor"
              label="用户"
              width="100">
            </el-table-column>
            <el-table-column
              prop="verb"
              label="行为"
              width="100">
            </el-table-column>
            <el-table-column
              prop="object"
              label="活动"
              width="100">
            </el-table-column>
            <el-table-column
              prop="app"
              label="应用名称">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <!--右-->
      <div style="width: 23%;float: left;height:auto;margin-left: 5%">
        <el-card style="width: 100%;height:150px ;background-color: crimson">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="warningUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <h3>异常行为数据</h3>
            <h1>{{total.error}}</h1>
            <h3>条</h3>
          </div>
        </el-card>
        <el-card style="width: 100%;height:150px ;background-color: skyblue;margin-top: 3%">
          <div class="block" style="width: 50%;float: left">
            <el-avatar style="background-color: aliceblue" :size="100" :src="groupUrl"></el-avatar>
          </div>
          <div style="width: 50%;float: left ;height: auto;margin-top: 2%">
            <h3>共记录</h3>
            <h3>群组类型行为数据</h3>
            <h1>{{total.group}}</h1>
            <h3>条</h3>
          </div>
        </el-card>
      </div>
    </div>
  </el-card>
</template>
<script>
  import BehaviorTotal from "./cmps/BehaviorTotal";

  export default {

    mounted: function () {
      this.refreshData()
      this.getNewFive()
      this.getTotal()
    },
    name: 'CountIndex',
    data() {
      return {
        total:{},
        behaviorData: [],
        behaviorDataKey: 0,
        mainUrl: require('../../assets/main.png'),
        warningUrl: require('../../assets/警告.png'),
        manUrl: require('../../assets/man.png'),
        groupUrl: require('../../assets/group.png'),
        option: {
          legend: {
            data: ["行为数"]
          },
          xAxis: {
            data: []
          },
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: "行为数",
              type: "line",
              data: []
            }
          ]
        },
        option2: {
          legend: {
            data: ["错误行为数"]
          },
          xAxis: {
            data: []
          },
          yAxis: [
            {
              type: "value"
            }
          ],
          series: [
            {
              name: "错误行为数",
              type: "line",
              data: []
            }
          ]
        }
      }
    },
    components: {
      BehaviorTotal
    },
    methods: {
      refreshData() {
        window.timer = setInterval(() => {
          setTimeout(() => {
            //调取接口获取数据
            this.getBehavior()
            this.getNewFive()
            this.getTotal()
          }, 0)
        }, 10000)
      },
      getBehavior() {
        this.$axios.get("statistics/behavioral/total").then(successResponse => {
          this.option.xAxis.data = successResponse.data.time
          this.option.series[0].data = successResponse.data.total
          this.option2.xAxis.data = successResponse.data.time
          this.option2.series[0].data = successResponse.data.total
        }).catch(failResponse => {
        })
      },
      getNewFive() {
        this.$axios.get("behavior/new_five").then(successResponse => {
          this.behaviorData = successResponse.data
        }).catch(failResponse => {
        })
      },
      getTotal(){
        this.$axios.get("behavior/total").then(successResponse => {
          this.total = successResponse.data
        }).catch(failResponse => {
        })
      }

    }

  }


</script>
<style>

  .box-card {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
  }

  .box-div {
    width: 100%;
    height: auto;
    margin-top: 3%;
    margin-left: 2%;
  }

  .head_item_title {
    margin-bottom: 2%;

  }

  .head {
    height: 140px;
    margin-bottom: 3%;
    margin-top: 3%;
  }

  .head_card {
    width: 18%;
    height: 100%;
    float: left;
  }

  .title {

  }

</style>
